<template>
	<view class="study-course">
		<!-- Main Start -->
		<!-- 课程信息 -->
		<view class="course bg-white" style="height: 200px;">
			<!--图文课程顶部显示标题-->
			<view class="course-info" v-if="type == 1">
				<!-- 课程名称 -->
				<view class="text-xl font-medium flex-1">{{ courseData?.name }}</view>
				<!-- 介绍 -->
				<view class="text-muted mt-[18rpx] text-sm">
					{{ courseData?.teacher?.name }}
				</view>
			</view>

			<!-- 音频 -->
			<view class="bg-black" v-if="type == 2">
				<view class="w-full">
					<view class="video-wrapper" v-if="isBuy">
						<video id="myVideo" :src="catalogue_detail.content" @error="videoErrorCallback" enable-danmu
							danmu-btn controls poster="" show-mute-btn vslide-gesture enable-play-gesture
							autoplay></video>
					</view>
					<view v-else class="flex w-full justify-center items-center"
						style="height: 180px;background: #fff;color: #000;align-items: center;">
						请先购买购课程
					</view>
				</view>
			</view>
			<!-- 视频 -->
			<view class="bg-black" v-if="type == 3">
				<view class="w-full">
					<view class="video-wrapper" v-if="isBuy">
						<video id="myVideo" :src="catalogue_detail.content" @error="videoErrorCallback" enable-danmu
							danmu-btn controls poster="" show-mute-btn vslide-gesture enable-play-gesture
							autoplay></video>
					</view>
					<view v-else class="flex w-full justify-center items-center"
						style="height: 180px;background: #fff;color: #000;align-items: center;">
						请先购买购课程
					</view>
				</view>
			</view>


			<!-- 图文 -->
			<view class="bg-white p-[30rpx]" v-if="type == 1">
				<mp-html :content="catalogue_detail.content" />
			</view>


		</view>

		<view class="course-info" v-if="type != 1">
			<!-- 课程名称 -->
			<view class="text-xl font-medium flex-1">{{ courseData?.name }}</view>
			<!-- 介绍 -->
			<view class="text-muted mt-[18rpx] text-sm">
				{{ courseData?.teacher?.name }}
			</view>
		</view>


		<!-- 课程目录 -->

		<view v-if="type != 1">
			<view class="mulu">
				<view class="mulu_title">
					目录
				</view>
				<view style="min-height: 700rpx">
					<view class="kcml" style="margin-bottom: 122upx;" :class="{dis:btnnum == 1}">

						<view class="kcml-list" v-for="(item,index) in catalogue_list
				    " :key="item.id" @click="openvideo(item)" v-if="courseData.course_status != 3">
							<view class="kcml-list-left">
								<text>{{(index+1)+' . '+ item.name}}</text>
							</view>
							<view class="kcml-list-right">
								<view v-if="item.fee_type == 0 ">
									<text v-if="item.type === 0">试读</text>
									<text v-else-if="item.type === 1">试听</text>
									<text v-else-if="item.type === 2">试看</text>
									<text v-else>试试看</text>
								</view>
								<image v-else
									src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/471710857207Bi1rOW.png"
									mode=""></image>
							</view>
						</view>

						<view class="kcml-list" v-for="(item,index) in catalogue_list
						" :key="item.id" @click="openvideo(item)" v-else>
							<view class="kcml-list-left">
								<text>{{(index+1)+' . '+ item.name}}</text>
							</view>
							<view class="kcml-list-right">
								<image
									src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/381712077718IzpLNo.png"
									mode=""></image>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- Main End -->


		<view class="buy" v-if="courseData.course_status != 3">
			<view class="buy-right" @click="ShowPay()">立即购买</view>
		</view>

	</view>

	<!-- 购买课程弹窗 Start -->
	<!-- 支付pop -->
	<u-popup :show="paypop" mode="bottom" :round="15" @close="closespaypop" @open="openpaypop">
		<view style="padding-bottom: 30rpx;height: 350px;" class="showbottom">
			<view class="pay-type-list">
				<view class="pay-title">请选择支付方式：</view>
				<radio-group class="uni-flex" name="gender">
					<block v-for="(item, index) in payList" :key="index">
						<view class="type-item" :class="{ 'act': index === selectedIndex }" @click="selectNav(item,index)">
							<image :src="item.icon" mode="" class="a-img"></image>
							<view class="con">
								<text class="tit">{{item.pay_way_name}}</text>
							</view>
						</view>
					</block>
				</radio-group>
			</view>
			<view class="botton" @click="topay()">
				<text class="text110">确认支付</text>
			</view>
		</view>
	</u-popup>
	
	<!-- 购买课程弹窗 End -->
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		components: {
			// statusPoint
		},
		data() {
			return {
				showLang: false,
				isBuy: false,
				courseData: [],
				catalogue_list: [],
				catalogue_detail: {},
				id: '', // 目录ID
				course_id: '', // 课程ID
				name: '', // 课程名称
				fee_type: '', // 是否免费
				cover: '', // 封面
				content: '', // 内容
				type: '',
				cate_id: '',
				cateId: '',
				paypop: false,
				payList: uni.getStorageSync('pay'),
				Payinfo: {},
				pay_way: 1,
				selectedIndex: 10,
			}
		},
		onLoad(opt) {
			this.type = opt.type
			this.course_id = opt.course_id
			this.cate_id = opt.cate_id
			this.cateId = opt.cate_id
			this.getData()
			this.getCourse()
		},
		methods: {
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
			},
			ShowPay(){
				this.paypop = true
			},
			closespaypop(){
				this.paypop = false
			},
			openpaypop(){},
			async getData() {
				try {
					const res = await $H.post('course/detail', {
						id: this.course_id
					}, {
						token: true
					});
					this.courseData = res.data
					this.catalogue_list = res.data.catalogue_list
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			async getCourse() {
				try {
					const res = await $H.post('course/catalogue', {
						id: this.cate_id,
						course_id: this.course_id
					}, {
						token: true
					});
					this.catalogue_detail = res.data
					if (res.code == 1) {
						this.isBuy = true
					} else {
						this.isBuy = false
					}

				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			async topay() {
				try {
					const res = await $H.post('order/CreateCourseOrder', {
						id: this.course_id,
						pay_way: this.pay_way,
					}, {
						token: true
					});
					
					this.paypop = false
					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/order/course/index'
								})
							}, 400)
						} else if(res.data.code == 2){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							// this.paypop = false
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/order/course/index'
										})
									}, 400)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			async openvideo(item) {
				try {
					const res = await $H.post('course/catalogue', {
						id: item.id,
						course_id: item.course_id
					}, {
						token: true
					});
					this.catalogue_detail = res.data
					if (res.code == 1) {
						this.isBuy = true
					} else {
						this.isBuy = false
					}
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
		},
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.showbottom {
		padding: 20px;
	}
	.buy {
		width: 100%;
		height: 122upx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		border-radius: 40upx 40upx 0 0;

		&-right {
			width: 90%;
			height: 80upx;
			background-image: linear-gradient(to right, #4498ff, #1763ff);
			border-radius: 80upx;
			font-size: 34upx;
			font-weight: 700;
			color: #fff;
			// border: 3upx solid #fff;
			text-align: center;
			line-height: 80upx;
			letter-spacing: 7rpx;
		}
	}

	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;
		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}
	
		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;
			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}
	
		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}
	
		.icon {
			width: 100upx;
			font-size: 52upx;
		}
	
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
	
		.icon-weixinzhifu {
			color: #36cb59;
		}
	
		.icon-alipay {
			color: #01aaef;
		}
	
		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}
	
		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}
	
	.act{
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}
	
	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}

	.study-course {
		margin-bottom: 400rpx;


		.course-info {
			background: #fff;
			margin: 15px;
			padding: 10px;
		}


		// 课程信息
		.course {
			.audio-wrapper {
				padding: 24rpx;
				height: 400rpx;
				padding: 140rpx 0;
				background-color: #fff;

				::v-deep .wx-slider-handle-wrapper {
					height: 10rpx !important;
					border: 16rpx !important;
					background: #bfbfbf !important;
				}

				::v-deep .wx-slider-track {
					background-color: #ffffff !important;
				}
			}

			.video-wrapper {
				position: relative;

				video {
					width: 100%;
					height: 400rpx;
					position: fixed;
					top: 0;
					z-index: 10;
				}
			}

			.course-info {
				padding: 30rpx;
			}
		}
	}

	// 服务下架或不存在时
	.empty {
		padding-top: 200rpx;

		.empty-bottom {
			width: 90vw;
			margin-top: 130rpx;
		}
	}

	// 通用弹窗
	.course-pop {
		width: 640rpx;
		padding: 70rpx 80rpx 40rpx 80rpx;
	}


	.mulu {
		margin: 15px;
		background: #f8f8f8;
		padding: 10px;
		border-radius: 15px;

		.mulu_title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 10px;
		}
	}

	.kcml {
		// display: none;
		padding: 0 20upx;
		background-color: #fff;
		border-radius: 8px;

		&-list {
			padding: 20upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;

			&-left {
				width: 436upx;
				height: 60upx;
				line-height: 60upx;

				.yinpin {
					display: inline-block;
					width: 64upx;
					height: 32upx;
					font-size: 20upx;
					color: #ff6969;
					border: 2upx solid #ff6969;
					border-radius: 5upx;
					box-sizing: border-box;
					text-align: center;
					line-height: 28upx;
					margin-right: 15upx;
					vertical-align: middle;
				}

				.shipin {
					display: inline-block;
					width: 64upx;
					height: 32upx;
					font-size: 20upx;
					color: #398cff;
					border: 2upx solid #398cff;
					border-radius: 5upx;
					box-sizing: border-box;
					text-align: center;
					line-height: 24upx;
					margin-right: 15upx;
					vertical-align: middle;
				}

				.tuwen {
					display: inline-block;
					width: 64upx;
					height: 32upx;
					font-size: 20upx;
					color: #8bc34a;
					border: 2upx solid #8bc34a;
					border-radius: 5upx;
					box-sizing: border-box;
					text-align: center;
					line-height: 24upx;
					margin-right: 15upx;
					vertical-align: middle;
				}

				text:nth-child(2) {
					font-size: 25upx;
					color: #070707;
					display: inline-block;
					white-space: nowrap;
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					vertical-align: middle;
				}
			}

			&-right {
				text {
					font-size: 24upx;
					color: #007AFF;
					vertical-align: middle;
				}

				image {
					width: 30upx;
					height: 30upx;
					vertical-align: middle;
				}
			}
		}
	}
	
	
	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}
	
	
	.botton {
		bottom: 20px;
		position: fixed;
		width: 90%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	
</style>